<template>
  <z-paging
    ref="paging"
    v-model="itemList"
    @query="queryList"
    @scroll="onPagingScroll"
    :auto-show-back-to-top="true"
    :empty-view-img="`${getImageUrl('empty.png')} `"
    :empty-view-img-style="{ width: '12em' }"
  >
    <view slot="top">
      <view class="header">
        <view
          :style="{
            position: 'absolute',
            left: 0,
            right: 0,
            height: '250rpx',
            paddingTop: `${statusBarHeight + navbarHeight}px`,
            backgroundImage: `url(${getImageUrl('bg.png')})`
          }"
        >
        </view>
        <u-navbar
          :is-back="false"
          title-size="36"
          title-color="#fff"
          :border-bottom="false"
          :background="{
            background: 'transparent'
          }"
        >
          <u-icon
            style="padding: 0 20rpx"
            name="/static/return.png"
            size="30rpx"
            @click="$utils.goToHome()"
          ></u-icon>
          <view class="delivery-tabs">
            <text :class="{ active: deliveryTab === 'pickup' }" @click="onDeliveryTab('pickup')"
              >自取
            </text>
            <text :class="{ active: deliveryTab === 'takeout' }" @click="onDeliveryTab('takeout')"
              >外卖
            </text>
          </view>
        </u-navbar>
      </view>
      <view class="mer-top">
        <view class="mer-info">
          <view class="mer-info-left">
            <u-image
              :src="shopInfo.logo"
              mode="aspectFill"
              width="150rpx"
              height="150rpx"
              border-radius="10rpx"
            ></u-image>
          </view>
          <view class="mer-info-right">
            <view class="mer-title dis-flex flex-y-between">
              <view class="flex-1 dis-flex flex-column">
                <text>{{ shopInfo.name }}</text>
                <view style="color: #666666; font-size: 26rpx; margin-top: 20rpx">
                  <text>评分{{ shopInfo.score ? shopInfo.score.toFixed(1) : 5.0 }}</text>
                  <text style="margin-left: 30rpx">月销{{ shopInfo.salesCountPerMonth }}</text>
                </view>
                <text v-if="dineConfig" style="color: #999999; font-size: 26rpx; margin-top: 20rpx"
                  >{{ (dineConfig.consumeThresholdPrice * 0.01).toFixed(0) }}元起送，运费{{
                    (dineConfig.deliveryPrice * 0.01).toFixed(0)
                  }}元，满{{ (dineConfig.deliveryFreeThresholdPrice * 0.01).toFixed(0) }}元免配送费
                </text>
              </view>
              <view class="follow" v-if="!shopInfo.follow" @click="onFollow">
                <u-icon class="t-icon" name="/static/scsp.png" size="36"></u-icon>
                <view>收藏</view>
              </view>
              <view class="follow" v-else @click="onFollow">
                <u-icon class="t-icon" name="/static/scsp_xz.png" size="36"></u-icon>
                <view>已收藏</view>
              </view>
            </view>
          </view>
        </view>
        <view class="store-content">
          <view class="houre dis-flex flex-y-center flex-y-between">
            <view class="dis-flex flex-y-center flex-y-between">
              <u-icon class="h-h-icon" name="/static/sj.png" size="28"></u-icon>
              <text>营业时间：{{ shopInfo.businessHours }}</text>
            </view>
            <u-icon @click="callPhone" class="h-icon" name="/static/bh.png" size="32"></u-icon>
          </view>
          <view class="houre dis-flex flex-y-center flex-y-between">
            <view class="address oneline-hide-1">
              <u-icon
                style="position: relative; top: 6rpx"
                class="h-h-icon"
                name="/static/dw-h.png"
                size="28"
              ></u-icon>
              <text>{{ shopInfo.detailAddress || '无' }}</text>
            </view>
            <u-icon @click="openLocation" class="h-icon" name="/static/dhd.png" size="32"></u-icon>
          </view>
          <view class="postion" v-if="shopInfo.distance">距您{{ shopInfo.distance }}km</view>
          <view
            class="dis-flex flex-y-center flex-y-between"
            style="color: #333333; font-size: 26rpx; margin-top: 20rpx"
            @click="showDeliveryModel = true"
          >
            <text v-if="deliveryAddressSelected"
              >配送区域：{{ deliveryAddressSelected.detailAddress }}
            </text>
            <view v-else class="flex">
              <text>配送区域：</text>
              <text style="color: red">请确认配送方式及配送范围</text>
            </view>
            <u-icon name="/static/more.png" size="26"></u-icon>
          </view>
        </view>
      </view>
      <view class="menu-tabs">
        <text :class="{ active: currentTab === 'dish' }" @click="onTabChange('dish')">点菜</text>
        <!-- <text
          :class="{ active: currentTab === 'combination' }"
          @click="onTabChange('combination')"
          >套餐
        </text> -->
        <text :class="{ active: currentTab === 'comment' }" @click="onTabChange('comment')"
          >评价
        </text>
      </view>
    </view>

    <scroll-view
      slot="left"
      class="dish-category-container"
      :class="{
        'dish-category-hide': currentTab === 'comment'
      }"
      :scroll-y="true"
    >
      <view
        class="dish-category-item"
        v-for="(item, index) in menuList"
        :key="item.id"
        :class="{ active: activeMenu === index }"
        @click="onMenuChange(index)"
      >
        <text>{{ item.name }}</text>
        <view v-if="Number(item.count) > 0" class="dish-category-item-count">
          <text>{{ item.count }}</text>
        </view>
      </view>
    </scroll-view>

    <view v-if="currentTab === 'dish' || currentTab === 'combination'" class="dish-goods-container">
      <!-- <view v-if="menuList[activeMenu]" class="dish-goods-category"
        >{{ menuList[activeMenu].name }}
      </view> -->
      <view v-if="itemList && itemList.length > 0" class="dish-goods-list">
        <view class="dish-goods-item" v-for="(dish, dindex) in itemList" :key="dindex">
          <image
            class="dish-goods-image"
            :src="dish.picUrl"
            mode="aspectFill"
            @click="onDetails(dish)"
          ></image>
          <view
            v-if="dish.dishAttribute > 0 && dish.dishAttributeName"
            class="dish-goods-tag"
            @click="onDetails(dish)"
          >
            <u-tag :text="dish.dishAttributeName" type="primary" size="mini" plain></u-tag>
          </view>
          <view
            v-if="dish.labels && dish.labels.length"
            class="dish-goods-labels using-hidden"
            @click="onDetails(dish)"
          >
            <u-tag :text="dish.labels.join('、')" type="warning" size="mini" plain></u-tag>
          </view>
          <view class="dish-goods-details">
            <text class="dish-goods-name using-hidden" @click="onDetails(dish)">
              {{ dish.name }}
            </text>
            <view class="dis-flex flex-x-baseline flex-y-between" @click="onDetails(dish)">
              <view class="dish-goods-price" v-if="dish.price === 0">免费</view>
              <view class="dish-goods-price" v-else>¥{{ (dish.price * 0.01).toFixed(2) }}</view>
              <text style="font-size: 24rpx; color: #999999; margin-left: 10rpx"
                >{{
                  dish.stepQuantity && dish.unitName ? 'x' + dish.stepQuantity + dish.unitName : ''
                }}
              </text>
            </view>
            <view
              v-if="dish.stock <= 0"
              class="dish-goods-action"
              style="margin-right: 15rpx; color: #999"
              @click="onDetails(dish)"
            >
              <text>已售罄</text>
            </view>
            <view v-else-if="Number(dish.count) > 0" class="dish-goods-action">
              <u-number-box
                v-if="!dish.specType"
                v-model="dish.count"
                :min="0"
                :max="dish.limitMaxQuantity"
                :index="dindex"
                :disabled-input="false"
                @change="(e) => onCartCont(e, dish)"
                @minus="(e) => onCartCont(e, dish)"
                @plus="(e) => onCartCont(e, dish)"
              >
              </u-number-box>
              <view
                v-else
                class="dish-spec-btn"
                style="margin-right: 15rpx"
                @click.stop.prevent="showSpecList(dish)"
                >规格({{ dish.count }})
              </view>
            </view>
            <view v-else class="dish-goods-action">
              <u-icon
                v-if="!dish.specType"
                :class="[`add-cart-${dish.id}`]"
                style="margin-right: 15rpx"
                size="40"
                name="/static/add-y.png"
                @click.native.stop.prevent="addToCart(dish)"
              ></u-icon>
              <view
                v-else
                class="dish-spec-btn"
                style="margin-right: 15rpx"
                @click.stop.prevent="showSpecList(dish)"
                >选规格
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view v-if="currentTab === 'comment'" class="comment-container">
      <view class="comment-top">
        <view class="count dis-flex">
          <text class="count-l star">{{ shopInfo.score }}</text>
          <u-rate
            class="count-r"
            v-model="shopInfo.scoreLevel"
            disabled
            active-color="#FBC258"
            inactive-color="#CCCCCC"
            size="36"
            gutter="10"
          ></u-rate>
        </view>
        <view class="count dis-flex">
          <text class="count-l des">商家评分</text>
          <view class="count-r dis-flex" v-if="shopInfo && shopInfo.commentCount">
            <view
              class="type"
              :class="commentType == 0 ? 'checked' : ''"
              @click="onCommentTypeChange(0)"
              >全部{{ shopInfo.commentCount.allCount }}
            </view>
            <view
              class="type"
              :class="commentType == 1 ? 'checked' : ''"
              @click="onCommentTypeChange(1)"
              >好评{{ shopInfo.commentCount.positiveCount }}
            </view>
            <view
              class="type"
              :class="commentType == 3 ? 'checked' : ''"
              @click="onCommentTypeChange(3)"
              >差评{{ shopInfo.commentCount.negativeCount }}
            </view>
            <view
              class="type"
              :class="commentType == 4 ? 'checked' : ''"
              @click="onCommentTypeChange(4)"
              >有图{{ shopInfo.commentCount.hasPictureCount }}
            </view>
          </view>
        </view>
      </view>
      <view v-if="itemList && itemList.length > 0" class="comment-area">
        <view class="comment-box" v-for="(item, cindex) in itemList" :key="cindex">
          <view class="comment-info dis-flex flex-y-center">
            <u-avatar style="margin-right: 10rpx" src="" size="70"></u-avatar>
            <view class="info-left-username">
              <view class="name">{{ item.user ? item.user.nickname || '匿名' : '匿名' }}</view>
              <view class="date">{{ $u.timeFormat(item.createTime, 'yyyy-mm-dd') }}</view>
            </view>
          </view>
          <view class="comment-star dis-flex">
            <view class="">
              <u-rate
                v-model="item.scores"
                disabled
                active-color="#FBC258"
                inactive-color="#CCCCCC"
                size="31"
                gutter="10"
              ></u-rate>
            </view>
            <text class="comment-star-text" v-if="item.scores == 5">非常满意</text>
            <text class="comment-star-text" v-if="item.scores == 4">满意</text>
            <text class="comment-star-text" v-if="item.scores == 3">一般</text>
            <text class="comment-star-text" v-if="item.scores == 2">不满意</text>
            <text class="comment-star-text" v-if="item.scores == 1">非常不满意</text>
          </view>
          <view class="">
            <view class="comment-content dis-flex flex-wrap">
              <text v-if="item.spuName" style="color: #0f76bc">@{{ item.spuName }}</text>
              <text
                v-if="item.skuProperties && item.skuProperties.length > 0"
                style="color: #0f76bc"
                >#{{ item.skuProperties[0].valueName }}
              </text>
              <text v-if="item.content" style="margin-left: 10rpx">{{ item.content }}</text>
            </view>
            <view class="comment-img" v-if="item.picUrls && item.picUrls.length > 0">
              <view class="image" v-for="(pic, i) in item.picUrls" :key="i">
                <u-image
                  :src="pic"
                  mode=""
                  border-radius="8"
                  width="216rpx"
                  height="145rpx"
                ></u-image>
              </view>
            </view>
          </view>
        </view>
        <view class="" style="height: 300rpx"></view>
      </view>
    </view>

    <!-- --start-- 购物车弹窗 -->

    <u-popup
      v-model="showSpecModel"
      backgroundColor="transparent"
      bgColor="transparent"
      mode="center"
      width="500rpx"
      height="auto"
      border-radius="30"
      :z-index="100003"
    >
      <view class="tishi-box">
        <view class="content" v-if="goodsInfo">
          <view class="goods-detail">
            <view class="name">{{ goodsInfo.name }}</view>
            <view class="spec">
              <view class="tl">规格：</view>
              <view class="spec-list">
                <view
                  class="spec-item"
                  v-for="(spec, specIndex) in goodsInfo.uniapp.spec_list"
                  :key="specIndex"
                >
                  <text style="margin-right: 20rpx; font-size: 24rpx; color: #666666"
                    >{{ spec.name }}
                  </text>
                  <text
                    v-for="(_spec, _specIndex) in spec.list"
                    :key="_specIndex"
                    class="text"
                    :class="_spec.checked ? 'checked' : ''"
                    @click="checkSpecItem(specIndex, _specIndex)"
                    >{{ _spec.name }}
                  </text>
                </view>
              </view>
            </view>
            <view class="check-item"
              >已选规格：
              <text v-if="checkedSpecItem">{{ checkedSpecItem.sku_name_arr.join(',') }}</text>
              <text v-else>请选择</text>
            </view>
            <view class="const dis-flex flex-y-center">
              <view v-if="checkedSpecItem">
                <text>原价:</text>
                <text v-if="checkedSpecItem.price === 0">免费</text>
                <text class="bold" v-else>¥{{ (checkedSpecItem.price * 0.01).toFixed(2) }}</text>
              </view>
              <view
                class="vip-price"
                style="margin-left: 20rpx"
                v-if="checkedSpecItem && goodsInfo.skus[checkedSpecItemIndex]"
              >
                <text>会员价:</text>
                <text v-if="goodsInfo.skus[checkedSpecItemIndex].vipPrice === 0">免费</text>
                <text class="bold" v-else
                  >¥{{ (goodsInfo.skus[checkedSpecItemIndex].vipPrice * 0.01).toFixed(2) }}
                </text>
              </view>
            </view>
            <view
              class="goods-point dis-flex flex-y-between"
              v-if="
                checkedSpecItem &&
                goodsInfo.skus[checkedSpecItemIndex] &&
                goodsInfo.skus[checkedSpecItemIndex].pointDeductCount
              "
            >
              <view class="point">
                {{ goodsInfo.skus[checkedSpecItemIndex].pointDeductCount }}积分抵¥{{
                  goodsInfo.skus[checkedSpecItemIndex].pointDeductPriceYuan
                }}
              </view>
            </view>
            <view
              class="goods-cryptocurrency dis-flex flex-y-between"
              v-if="
                checkedSpecItem &&
                goodsInfo.skus[checkedSpecItemIndex] &&
                goodsInfo.skus[checkedSpecItemIndex].cryptocurrencyDeductCount
              "
            >
              <view class="cryptocurrency">
                {{ goodsInfo.skus[checkedSpecItemIndex].cryptocurrencyDeductCount }}收益豆抵¥{{
                  goodsInfo.skus[checkedSpecItemIndex].cryptocurrencyDeductPriceYuan
                }}
              </view>
            </view>
            <view class="bottom dis-flex flex-y-between gap-10">
              <view v-if="checkedSpecItem" @click="addToCartSpec()" class="add-card">确认</view>
              <view v-else @click="addToCartSpec()" class="add-card disabled">确认</view>
              <view @click="colseSpecModle()" class="add-card" style="background-color: gray"
                >取消
              </view>
            </view>
          </view>
        </view>
        <text v-else>没有获取到菜品数据</text>
      </view>
    </u-popup>

    <u-popup
      v-model="showCardModel"
      @close="closeCarList"
      mode="bottom"
      width="100%"
      height="800rpx"
      border-radius="30"
    >
      <view class="car-box">
        <view class="car-tl dis-flex flex-y-between flex-x-center">
          <view class="tl-l">
            <text>购物车</text>
            <view class="dis-flex flex-x-baseline" style="font-size: 24rpx">
              <text style="color: #999999">共{{ carList.length }}样菜品，约</text>
              <text style="color: orange">{{ carListWeight }}克</text>
            </view>
          </view>
          <view
            v-if="carList.length > 0"
            class="clear dis-flex flex-y-center"
            @click="clearCarList()"
          >
            <text>清空购物车</text>
          </view>
          <view
            v-else
            class="dis-flex flex-y-center"
            style="padding: 10rpx"
            @click="showCardModel = false"
          >
            <u-icon name="/static/close-t.png" size="30"></u-icon>
          </view>
        </view>
        <view class="car-list">
          <scroll-view v-if="carList.length > 0" :scroll-y="true" style="height: 550rpx">
            <view class="itemView" v-for="(item, index) in carList" :key="item.id">
              <view class="dis-flex" style="position: relative">
                <u-image width="90" height="90" :src="item.picUrl" border-radius="8"></u-image>
                <view v-if="item.dishAttribute > 0 && item.dishAttributeName" class="itemTag">
                  <u-tag :text="item.dishAttributeName" type="primary" size="mini" plain></u-tag>
                </view>
                <view class="itemInfo">
                  <view class="dis-flex flex-x-end flex-y-between">
                    <view class="dis-flex flex-x-end flex-y-start flex-1">
                      <view class="itemTitle oneline-hide-1 flex-1">{{ item.name }}</view>
                      <view style="font-size: 24rpx; color: #999999; margin-left: 10rpx">
                        <text v-for="(item2, i) in item.sku.properties" :key="i"
                          >{{ item2.valueName + (i === item.sku.properties.length - 1 ? '' : ',') }}
                        </text>
                      </view>
                      <text style="font-size: 24rpx; color: #999999; margin-left: 10rpx"
                        >{{
                          item.stepQuantity && item.unitName
                            ? 'x' + item.stepQuantity + item.unitName
                            : ''
                        }}
                      </text>
                    </view>
                    <text style="font-size: 24rpx; color: #666666; margin-left: 20rpx"
                      >{{
                        item.stepQuantity && item.unitName && item.weight > 0
                          ? '约' + item.weight * item.count + '克'
                          : ''
                      }}
                    </text>
                  </view>
                  <view class="dis-flex">
                    <view class="point-rule dis-flex flex-column">
                      <view class="price">
                        <text class="t">原价</text>
                        <text class="n" v-if="item.price === 0">免费</text>
                        <text class="n" v-else>¥{{ (item.price * 0.01).toFixed(2) }}</text>
                      </view>
                      <view class="price">
                        <text class="t">会员价</text>
                        <text class="n" v-if="item.vipPrice === 0">免费</text>
                        <text class="n" v-else>¥{{ (item.vipPrice * 0.01).toFixed(2) }}</text>
                      </view>
                    </view>
                    <view class="uicon numberBox">
                      <u-number-box
                        v-model="item.count"
                        :index="index"
                        :min="0"
                        :max="item.limitMaxQuantity"
                        :disabled-input="false"
                        @change="(e) => onCartCont(e, item)"
                        @minus="(e) => onCartCont(e, item)"
                        @plus="(e) => onCartCont(e, item)"
                      ></u-number-box>
                    </view>
                  </view>
                </view>
                <view v-if="item.invalid" class="cant-check">
                  <text> {{ item.invalidReason }}</text>
                  <view class="flex-1"></view>
                  <text class="del" @click="delCartItem(item)">删除</text>
                </view>
              </view>
            </view>
            <u-gap height="45"></u-gap>
          </scroll-view>
          <view v-else style="display: flex; align-items: center; justify-content: center"
            >暂无数据
          </view>
        </view>
      </view>
    </u-popup>

    <view
      v-if="(currentTab === 'dish' || currentTab === 'combination') && carList.length > 0"
      class="fixed-wapper pb-ios"
      style="z-index: 99999"
    >
      <view class="bt-box dis-flex">
        <view class="other dis-flex flex-y-between flex-y-center">
          <view class="flex-1 count dis-flex flex-y-center" style="flex: 1" @click="showCarList">
            <view class="count-icon">
              <u-icon name="/static/gwc-tm.png" style="margin-top: 10rpx" size="48"></u-icon>
              <u-badge
                v-if="carList.length > 0"
                type="error"
                size="mini"
                :count="carList.reduce((a, b) => a + b.count, 0)"
                :offset="[0, -20]"
              ></u-badge>
            </view>
            <text v-if="countPrice" class="count-text">¥{{ (countPrice * 0.01).toFixed(2) }} </text>
            <text v-if="diffThresholdPrice < 0" class="deliver-price" style="color: red"
              >再加{{ Math.abs(diffThresholdPrice * 0.01).toFixed(2) }}元起送
            </text>
            <text
              v-else-if="countPrice < dineConfig.deliveryFreeThresholdPrice"
              class="deliver-price"
            >
              需配送费{{ (deliveryPrice * 0.01).toFixed(2) }}元
            </text>
            <text v-else-if="countDiscontPrice > 0" class="deliver-price">
              优惠价{{ (countDiscontPrice * 0.01).toFixed(2) }}元
            </text>
            <text v-else class="deliver-price"
              >免配送费{{ (deliveryPrice * 0.01).toFixed(2) }}元
            </text>
          </view>
          <view @click="submit" class="submit-btn"> 去下单</view>
        </view>
      </view>
    </view>

    <view
      v-for="item in anims"
      :key="item.key"
      class="add-btn-radio"
      style="position: fixed; transition: transform 0.5s linear"
      :style="{
        top: `${item.top}px`,
        left: `${item.left}px`,
        transform: `translate(${item.x}px, ${item.y}px)`
      }"
    >
      <u-icon size="32" name="/static/add-y.png"></u-icon>
    </view>

    <!-- --end-- 购物车弹窗 -->

    <u-popup
      v-model="showDeliveryModel"
      mode="bottom"
      width="100%"
      height="800rpx"
      border-radius="30"
      :z-index="100000"
    >
      <view class="car-box">
        <view class="car-tl dis-flex flex-y-between flex-x-center">
          <view class="tl-l">
            <text style="color: orange; font-size: 24rpx"
              >需要确定配送区域才能点外卖，否则只能到店自取。
            </text>
          </view>
          <view
            class="dis-flex flex-y-center"
            style="padding: 10rpx"
            @click="showDeliveryModel = false"
          >
            <u-icon name="/static/close-t.png" size="30"></u-icon>
          </view>
        </view>
        <view class="car-list dis-flex flex-column">
          <view
            v-for="(item, index) in deliveryAddresses"
            :key="index"
            class="car-item dis-flex"
            @click="onDeliveryAddressSelected(item)"
          >
            <view class="car-icon">
              <u-icon
                v-if="
                  deliveryAddressSelected &&
                  item.detailAddress === deliveryAddressSelected.detailAddress
                "
                name="/static/selected.png"
                size="40"
              ></u-icon>
              <u-icon v-else name="/static/unselect.png" size="40"></u-icon>
            </view>
            <text class="car-name">{{ item.detailAddress }}</text>
          </view>
          <view
            v-if="!deliveryAddresses || !deliveryAddresses.length"
            class="dis-flex flex-x-center flex-y-center"
          >
            不在配送范围内，需到店自取
          </view>
          <view
            class="dis-flex flex-column"
            style="position: fixed; left: 30rpx; right: 30rpx; bottom: 60rpx"
          >
            <text
              style="
                background: #10a391;
                color: #fff;
                text-align: center;
                padding: 20rpx 50rpx;
                border-radius: 50rpx;
              "
              @click="onDeliveryAddressConfirm"
              >配送到选定的区域
            </text>
            <text
              style="
                color: #10a391;
                text-align: center;
                padding: 20rpx 50rpx;
                border-radius: 50rpx;
                border: 1px solid #10a391;
                margin-top: 20rpx;
              "
              @click="onDeliveryAddressPickup"
              >到店自取
            </text>
          </view>
        </view>
      </view>
    </u-popup>

    <u-popup
      v-model="showStapleFoodModel"
      mode="bottom"
      width="100%"
      height="800rpx"
      border-radius="30"
      :z-index="100001"
    >
      <view class="car-box">
        <view class="car-tl dis-flex flex-y-between flex-x-center">
          <view class="tl-l">
            <text style="color: orange; font-size: 24rpx">加购主食，请根据实际情况进行选择。 </text>
          </view>
          <view
            class="dis-flex flex-y-center"
            style="padding: 10rpx"
            @click="showStapleFoodModel = false"
          >
            <u-icon name="/static/close-t.png" size="30"></u-icon>
          </view>
        </view>
        <scroll-view :scroll-y="true" style="height: 700rpx">
          <view class="dish-goods-container dis-flex flex-column">
            <view v-if="stapleFoodSpus && stapleFoodSpus.length > 0" class="dish-goods-list">
              <view class="dish-goods-item" v-for="(dish, dindex) in stapleFoodSpus" :key="dindex">
                <image
                  class="dish-goods-image"
                  :src="dish.picUrl"
                  mode="aspectFill"
                  @click="onDetails(dish)"
                ></image>
                <view
                  v-if="dish.dishAttribute > 0 && dish.dishAttributeName"
                  class="dish-goods-tag"
                  @click="onDetails(dish)"
                >
                  <u-tag :text="dish.dishAttributeName" type="primary" size="mini" plain></u-tag>
                </view>
                <view
                  v-if="dish.labels && dish.labels.length"
                  class="dish-goods-labels using-hidden"
                  @click="onDetails(dish)"
                >
                  <u-tag :text="dish.labels.join('、')" type="warning" size="mini" plain></u-tag>
                </view>
                <view class="dish-goods-details">
                  <text class="dish-goods-name using-hidden" @click="onDetails(dish)">
                    {{ dish.name }}
                  </text>
                  <view class="dis-flex flex-x-baseline flex-y-between" @click="onDetails(dish)">
                    <view class="dish-goods-price" v-if="dish.price === 0">免费</view>
                    <view class="dish-goods-price" v-else
                      >¥{{ (dish.price * 0.01).toFixed(2) }}</view
                    >
                    <text style="font-size: 24rpx; color: #999999; margin-left: 10rpx"
                      >{{
                        dish.stepQuantity && dish.unitName
                          ? 'x' + dish.stepQuantity + dish.unitName
                          : ''
                      }}
                    </text>
                  </view>
                  <view
                    v-if="dish.stock <= 0"
                    class="dish-goods-action"
                    style="margin-right: 15rpx; color: #999"
                    @click="onDetails(dish)"
                  >
                    <text>已售罄</text>
                  </view>
                  <view v-else-if="Number(dish.count) > 0" class="dish-goods-action">
                    <u-number-box
                      v-if="!dish.specType"
                      v-model="dish.count"
                      :min="0"
                      :max="dish.limitMaxQuantity"
                      :index="dindex"
                      :disabled-input="false"
                      @change="(e) => onCartCont(e, dish)"
                      @minus="(e) => onCartCont(e, dish)"
                      @plus="(e) => onCartCont(e, dish)"
                    >
                    </u-number-box>
                    <view
                      v-else
                      class="dish-spec-btn"
                      style="margin-right: 15rpx"
                      @click.stop.prevent="showSpecList(dish)"
                      >规格({{ dish.count }})
                    </view>
                  </view>
                  <view v-else class="dish-goods-action">
                    <u-icon
                      v-if="!dish.specType"
                      :class="[`add-cart-${dish.id}`]"
                      style="margin-right: 15rpx"
                      size="40"
                      name="/static/add-y.png"
                      @click.native.stop.prevent="addToCart(dish)"
                    ></u-icon>
                    <view
                      v-else
                      class="dish-spec-btn"
                      style="margin-right: 15rpx"
                      @click.stop.prevent="showSpecList(dish)"
                      >选规格
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view
              v-if="!stapleFoodSpus || !stapleFoodSpus.length"
              class="dis-flex flex-x-center flex-y-center"
            >
              商家未配置主食
            </view>
          </view>
        </scroll-view>
      </view>
    </u-popup>

    <u-popup
      v-model="showKitchenwareModel"
      mode="bottom"
      width="100%"
      height="800rpx"
      border-radius="30"
      :z-index="100001"
    >
      <view class="car-box">
        <view class="car-tl dis-flex flex-y-between flex-x-center">
          <view class="tl-l">
            <text style="color: orange; font-size: 24rpx"
              >需要餐盒才能打包带走，请根据实际情况进行选择。
            </text>
          </view>
          <view
            class="dis-flex flex-y-center"
            style="padding: 10rpx"
            @click="showKitchenwareModel = false"
          >
            <u-icon name="/static/close-t.png" size="30"></u-icon>
          </view>
        </view>
        <scroll-view :scroll-y="true" style="height: 700rpx">
          <view class="dish-goods-container dis-flex flex-column">
            <view v-if="kitchenwareSpus && kitchenwareSpus.length > 0" class="dish-goods-list">
              <view class="dish-goods-item" v-for="(dish, dindex) in kitchenwareSpus" :key="dindex">
                <image
                  class="dish-goods-image"
                  :src="dish.picUrl"
                  mode="aspectFill"
                  @click="onDetails(dish)"
                ></image>
                <view
                  v-if="dish.dishAttribute > 0 && dish.dishAttributeName"
                  class="dish-goods-tag"
                  @click="onDetails(dish)"
                >
                  <u-tag :text="dish.dishAttributeName" type="primary" size="mini" plain></u-tag>
                </view>
                <view
                  v-if="dish.labels && dish.labels.length"
                  class="dish-goods-labels using-hidden"
                  @click="onDetails(dish)"
                >
                  <u-tag :text="dish.labels.join('、')" type="warning" size="mini" plain></u-tag>
                </view>
                <view class="dish-goods-details">
                  <text class="dish-goods-name using-hidden" @click="onDetails(dish)">
                    {{ dish.name }}
                  </text>
                  <view class="dis-flex flex-x-baseline flex-y-between" @click="onDetails(dish)">
                    <view class="dish-goods-price" v-if="dish.price === 0">免费</view>
                    <view class="dish-goods-price" v-else
                      >¥{{ (dish.price * 0.01).toFixed(2) }}</view
                    >
                    <text style="font-size: 24rpx; color: #999999; margin-left: 10rpx"
                      >{{
                        dish.stepQuantity && dish.unitName
                          ? 'x' + dish.stepQuantity + dish.unitName
                          : ''
                      }}
                    </text>
                  </view>
                  <view
                    v-if="dish.stock <= 0"
                    class="dish-goods-action"
                    style="margin-right: 15rpx; color: #999"
                    @click="onDetails(dish)"
                  >
                    <text>已售罄</text>
                  </view>
                  <view v-else-if="Number(dish.count) > 0" class="dish-goods-action">
                    <u-number-box
                      v-if="!dish.specType"
                      v-model="dish.count"
                      :min="0"
                      :max="dish.limitMaxQuantity"
                      :index="dindex"
                      :disabled-input="false"
                      @change="(e) => onCartCont(e, dish)"
                      @minus="(e) => onCartCont(e, dish)"
                      @plus="(e) => onCartCont(e, dish)"
                    >
                    </u-number-box>
                    <view
                      v-else
                      class="dish-spec-btn"
                      style="margin-right: 15rpx"
                      @click.stop.prevent="showSpecList(dish)"
                      >规格({{ dish.count }})
                    </view>
                  </view>
                  <view v-else class="dish-goods-action">
                    <u-icon
                      v-if="!dish.specType"
                      :class="[`add-cart-${dish.id}`]"
                      style="margin-right: 15rpx"
                      size="40"
                      name="/static/add-y.png"
                      @click.native.stop.prevent="addToCart(dish)"
                    ></u-icon>
                    <view
                      v-else
                      class="dish-spec-btn"
                      style="margin-right: 15rpx"
                      @click.stop.prevent="showSpecList(dish)"
                      >选规格
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view
              v-if="!kitchenwareSpus || !kitchenwareSpus.length"
              class="dis-flex flex-x-center flex-y-center"
            >
              商家未配置餐具
            </view>
          </view>
        </scroll-view>
      </view>
    </u-popup>
  </z-paging>
</template>

<script>
const systemInfo = uni.getSystemInfoSync()
const PICKUP_ADDRESS = { countyCode: '', detailAddress: '到店自取' }

export default {
  data() {
    return {
      // --start-- 购物车弹窗
      goodsInfo: null,
      showCardModel: false,
      showSpecModel: false,
      carList: [],
      checkedSpecItem: null,
      checkedSpecItemIndex: null,
      shecedSpecList: [],
      countPrice: 0,
      countDiscontPrice: 0,
      anims: [],
      // --end-- 购物车弹窗
      scrollTop: 0,
      statusBarHeight: systemInfo.statusBarHeight,
      shopId: '',
      shopInfo: {},
      dineConfig: {},
      deliveryAddresses: [],
      deliveryAddressSelected: null,
      deliveryTab: null,
      menuList: [],
      activeMenu: 0,
      currentTab: 'dish',
      itemList: [],
      commentType: 0,
      showDeliveryModel: false,
      deliveryPrice: 0,
      showStapleFoodModel: false,
      stapleFoodSpus: [],
      showKitchenwareModel: false,
      kitchenwareSpus: []
    }
  },
  computed: {
    // 转换字符数值为真正的数值
    navbarHeight() {
      let h
      // #ifndef MP-WEIXIN
      h = this.height ? this.height : 50
      // #endif
      // #ifdef MP-WEIXIN
      // 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
      // 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
      // return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
      let height = systemInfo.platform == 'ios' ? 44 : 48
      h = this.height ? this.height : height
      // #endif
      return h
    },
    supportPickup() {
      if (this.dineConfig && this.dineConfig.deliveryTypes) {
        return this.dineConfig.deliveryTypes.includes(4)
      }
      return false
    },
    supportTakeout() {
      if (this.dineConfig && this.dineConfig.deliveryTypes) {
        return this.dineConfig.deliveryTypes.includes(3)
      }
      return false
    },
    totalAmount() {
      return this.carList.reduce((total, item) => total + item.price * item.count, 0)
    },
    diffThresholdPrice() {
      return this.countPrice - (this.dineConfig.consumeThresholdPrice || 0)
    },
    carListWeight() {
      return this.carList.reduce((total, item) => total + item.weight * item.count, 0)
    }
  },
  onLoad(e) {
    this.shopId = e.shopId || '1915697490670272514'
    this.loadShopInfo()
    this.loadDineConfig()
    this.loadCategryList()
  },
  onShow() {
    this.userInfo = uni.getStorageSync('userInfo')
    console.debug('userInfo', this.userInfo)
    this.deliveryTab = uni.getStorageSync('deliveryTab')
    this.deliveryAddressSelected = uni.getStorageSync('deliveryAddressSelected')
    this.showDeliveryModel = this.deliveryTab === 'pickup'
  },
  methods: {
    onPagingScroll(e) {
      this.scrollTop = e.detail.scrollTop // 更新滚动位置
      console.debug('z-paging@scroll: scrollTop=' + this.scrollTop)
    },
    onDeliveryTab(tab) {
      if (this.deliveryTab && tab === this.deliveryTab) {
        return
      }
      uni.setStorageSync('deliveryTab', tab)
      this.deliveryTab = tab
      this.deliveryAddresses = this.dineConfig.deliveryAddresses
      if (this.deliveryTab === 'pickup') {
        this.deliveryAddressSelected = PICKUP_ADDRESS
        uni.setStorageSync('deliveryAddressSelected', PICKUP_ADDRESS)
      } else {
        if (
          this.deliveryAddressSelected &&
          this.deliveryAddressSelected.detailAddress === PICKUP_ADDRESS.detailAddress
        ) {
          this.deliveryAddressSelected = null
          uni.removeStorageSync('deliveryAddressSelected')
          this.showDeliveryModel = true
        }
      }
    },
    loadShopInfo() {
      this.$u.get('/app-api/shop/info/get?id=' + this.shopId).then((res) => {
        this.shopInfo = res.data
        if (this.$latitude && this.$longitude) {
          this.shopInfo.distance = this.calculateDistance(
            this.$latitude,
            this.$longitude,
            this.shopInfo.latitude,
            this.shopInfo.longitude
          )
        }
      })
    },
    loadDineConfig() {
      this.deliveryPrice = 0
      this.$u.get('/app-api/dine/config/get?shopId=' + this.shopId).then((res) => {
        this.dineConfig = res.data
        // 确保 discounts 按 lunchBox 降序排列
        if (this.dineConfig.discounts && this.dineConfig.discounts.length) {
          this.dineConfig.discounts.sort((a, b) => b.lunchBox - a.lunchBox)
        }
        this.deliveryPrice = res.data.deliveryPrice
        this.deliveryAddresses = res.data.deliveryAddresses
      })
    },
    onDeliveryAddressSelected(item) {
      this.deliveryAddressSelected = item
      uni.setStorageSync('deliveryAddressSelected', item)
      if (!this.$utils.isLogin()) {
        return
      }
      uni.showLoading()
      this.$u
        .post('/app-api/member/address/save-dine', {
          detailAddress: item.detailAddress,
          countyCode: item.countyCode
        })
        .then((res) => {
          uni.hideLoading()
          if (res.code != 0) {
            this.$u.toast(res.msg)
          }
        })
        .catch(() => {
          uni.hideLoading()
        })
    },
    onDeliveryAddressPickup() {
      this.deliveryAddressSelected = PICKUP_ADDRESS
      uni.setStorageSync('deliveryAddressSelected', PICKUP_ADDRESS)
      this.deliveryTab = 'pickup'
      uni.setStorageSync('deliveryTab', 'pickup')
      this.showDeliveryModel = false
    },
    onDeliveryAddressConfirm() {
      if (
        !this.deliveryAddressSelected ||
        this.deliveryAddressSelected.detailAddress === PICKUP_ADDRESS.detailAddress
      ) {
        this.$u.toast('请先勾选其中一个配送区域')
        return
      }
      this.deliveryTab = 'takeout'
      uni.setStorageSync('deliveryTab', 'takeout')
      this.showDeliveryModel = false
    },
    callPhone() {
      // #ifdef H5
      uni.showToast({
        icon: 'none',
        title: 'H5不支持拨打电话'
      })
      // #endif
      // #ifndef H5
      uni.makePhoneCall({
        phoneNumber: shopInfo.contactMobile
      })
      // #endif
    },
    openLocation() {
      uni.openLocation({
        latitude: this.shopInfo.latitude,
        longitude: this.shopInfo.longitude,
        name: this.shopInfo.name || '',
        address: this.shopInfo.detailAddress || ''
      })
    },
    calculateDistance(lat1, lon1, lat2, lon2) {
      const radians = (degree) => degree * (Math.PI / 180)
      const R = 6371 // 地球平均半径，单位为千米
      const dLat = radians(lat2 - lat1)
      const dLon = radians(lon2 - lon1)
      lat1 = radians(lat1)
      lat2 = radians(lat2)
      const a =
        Math.sin(dLat / 2) * Math.sin(dLat / 2) +
        Math.cos(lat1) * Math.cos(lat2) * Math.sin(dLon / 2) * Math.sin(dLon / 2)
      const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
      const d = (R * c).toFixed(1)
      return d
    },
    onDetails(item) {
      this.$utils.route({
        url: '/goods/goods-details/goods-details?goodsId=' + item.id + '&shopId=' + item.shopId
      })
    },
    onFollow(item) {
      uni.$u
        .post('/app-api/shop/favorite/toggle', {
          shopId: item.shopId
        })
        .then((res) => {
          if (res.code === 0) {
            let msg = this.shopInfo.follow ? '已取消' : '收藏成功'
            this.$u.toast(msg)
            this.shopInfo.follow = !this.shopInfo.follow
          } else {
            this.$u.toast(res.msg)
          }
        })
    },
    loadCategryList() {
      this.$u
        .get('/app-api/product/category/list', {
          shopId: this.shopId
        })
        .then((res) => {
          this.menuList = res.data
          this.activeMenu = 0
          this.queryList(1)
        })
        .catch(() => {
          uni.stopPullDownRefresh()
          this.$refs.paging.complete(false)
        })
    },
    onTabChange(tabItem) {
      this.currentTab = tabItem
      this.queryList(1)
    },
    onMenuChange(index) {
      this.activeMenu = index
      this.queryList(1)
    },
    onCommentTypeChange(type) {
      this.commentType = type
      this.queryList(1)
    },
    queryList(pageNo = 1, pageSize = 10) {
      if (pageNo === 1) {
        this.itemList = []
      }
      if (this.currentTab === 'dish') {
        this.$u
          .get('/app-api/product/spu/page-by-product-category', {
            categoryId:
              this.menuList && this.menuList.length > this.activeMenu
                ? this.menuList[this.activeMenu].id
                : '',
            pageNo,
            pageSize
          })
          .then((res) => {
            const items = res.data.list
            items.forEach((item) => {
              item.count = 0
              if (item.limitMaxQuantity > item.stock) {
                item.limitMaxQuantity = item.stock
              }
            })
            this.$refs.paging.complete(items)
            this.loadCartList()
          })
          .catch(() => {
            uni.stopPullDownRefresh()
            this.$refs.paging.complete(false)
          })
        return
      }
      if (this.currentTab === 'combination') {
        // TODO 待实现
        return
      }
      if (this.currentTab === 'comment') {
        this.$u
          .get('/app-api/product/comment/page', {
            type: this.commentType,
            shopId: this.shopId,
            pageNo,
            pageSize
          })
          .then((res) => {
            this.$refs.paging.complete(res.data.list)
          })
          .catch(() => {
            uni.stopPullDownRefresh()
            this.$refs.paging.complete(false)
          })
      }
    },
    // --start-- 购物车弹窗
    toLogin() {
      uni.$u.toast('请先登录！')
      this.$utils.goToLogin('/dine/diancan/diancanv2?shopId=' + this.shopId)
    },
    onCartCont(e, item) {
      console.debug(
        'onCartCont: e=' + JSON.stringify(e) + ', carId=' + item.carId + ', count=' + item.count
      )
      if (!this.userInfo) {
        this.toLogin()
        return
      }
      if (!this.deliveryTab || !this.deliveryAddressSelected) {
        this.$u.toast('请先确认配送方式及配送范围')
        this.showDeliveryModel = true
      }
      if (this.disable) {
        console.debug('onCartCont#disable: carId=' + item.carId)
        return
      }
      if (item.count > item.stock) {
        this.$u.toast('不能超过 ' + item.stock)
        return
      }
      this.disable = true
      const app = this
      app.$u
        .post('/app-api/trade/cart/update-count', {
          id: item.carId,
          count: e.value
        })
        .then((res) => {
          this.disable = false
          if (res.code === 0) {
            if (e.value === 0) {
              app.delCartItem(item)
            } else {
              app.loadCartList()
            }
          } else {
            app.$u.toast(res.msg)
          }
        })
        .catch(() => {
          this.disable = false
        })
    },
    delCartItem(item) {
      const app = this
      app.$u.get('/app-api/trade/cart/delete?ids=' + item.carId).then((res) => {
        if (res.code === 0) {
          app.loadCartList()
        } else {
          app.$u.toast(res.msg)
        }
      })
    },
    clearCarList() {
      this.$u
        .get('/app-api/trade/cart/deleteByShopId', {
          shopId: this.shopId
        })
        .then((res) => {
          if (res.code === 0) {
            this.carList = []
            this.onTotalPrice()
            return
          }
          this.$u.toast(res.msg)
        })
    },
    loadCartList() {
      const app = this
      app.$u.api
        .getCartList({
          shopId: app.shopId
        })
        .then((res) => {
          if (res.data && res.data.length > 0) {
            // 商家只会有详情页一个店铺，故取下标0
            //console.debug('获取购物车列表成功：' + JSON.stringify(res.data[0].items))
            app.carList = res.data[0].items.map((it) => ({
              id: it.id,
              carId: it.id,
              count: it.count,
              invalid: it.invalid,
              invalidReason: it.invalidReason,
              sku: it.sku,
              skuId: it.sku.id,
              price: it.sku.price,
              priceYuan: (it.sku.price * 0.01).toFixed(2),
              vipPrice: it.sku.vipPrice,
              vipPriceYuan: (it.sku.vipPrice * 0.01).toFixed(2),
              stock: it.sku.stock,
              weight: it.sku.weight * 1000,
              name: it.spu.name,
              picUrl: it.spu.picUrl,
              categoryId: it.spu.categoryId,
              unitName: it.spu.unitName,
              priceMode: it.spu.priceMode,
              stepQuantity: it.spu.stepQuantity,
              limitMaxQuantity:
                it.spu.limitMaxQuantity > it.spu.stock ? it.spu.stock : it.spu.limitMaxQuantity,
              dishAttribute: it.spu.dishAttribute,
              dishAttributeName: it.spu.dishAttributeName
            }))
            console.debug('购物车列表数据整理：' + JSON.stringify(app.carList))
          } else {
            app.carList = []
          }
          app.onTotalPrice()
        })
    },
    onTotalPrice() {
      if (this.carList.length == 0) {
        this.countPrice = 0
        this.countDiscontPrice = 0
        for (const orgItem of this.itemList) {
          orgItem.carId = 0
          orgItem.count = 0
        }
        for (const menuItem of this.menuList) {
          menuItem.count = 0
        }
        return
      }
      let total = 0
      for (const carItem of this.carList) {
        total += carItem.price * carItem.count
      }
      this.countPrice = total
      if (this.dineConfig.discounts && this.dineConfig.discounts.length) {
        // discounts 已按 price 降序排序
        for (const dscItem of this.dineConfig.discounts) {
          if (this.countPrice >= dscItem.price) {
            console.debug('享受满' + dscItem.price + '打' + dscItem.discount + '折')
            this.countDiscontPrice = (total * (dscItem.discount / 10)).toFixed(2)
            break
          }
        }
      }
      for (const orgItem of this.itemList) {
        orgItem.carId = 0
        orgItem.count = 0
        for (const carItem of this.carList) {
          //console.log('orgItem, carItem', orgItem, carItem)
          if (orgItem.skus.map((sku) => sku.id).includes(carItem.skuId)) {
            orgItem.carId = carItem.id
            orgItem.count = carItem.count
            break
          }
        }
      }
      for (const menuItem of this.menuList) {
        menuItem.count = 0
        for (const carItem of this.carList) {
          //console.log('menuItem, carItem', menuItem, carItem)
          if (menuItem.id === carItem.categoryId) {
            menuItem.count += carItem.count
          }
        }
      }
    },
    checkSpecItem(index, valueIndex) {
      let spec = this.goodsInfo.uniapp.spec_list[index]
      let value = this.goodsInfo.uniapp.spec_list[index].list[valueIndex]
      let newList = []
      spec.list.forEach((_spec, i) => {
        if (valueIndex == i) {
          _spec.checked = true
        } else {
          _spec.checked = false
        }
        newList.push(_spec)
      })
      this.goodsInfo.uniapp.spec_list[index].list = newList
      const existingIndex = this.shecedSpecList.findIndex((item) => item.name === spec.name)
      if (existingIndex !== -1) {
        this.shecedSpecList.splice(existingIndex, 1)
      }
      const newSpec = {
        name: spec.name,
        value: value.id
      }
      this.shecedSpecList.push(newSpec)
      if (this.shecedSpecList.length == this.goodsInfo.uniapp.spec_list.length) {
        this.goodsInfo.uniapp.sku_list.forEach((sku) => {
          sku.isThis = sku.spec_value_ids.every((item) =>
            this.shecedSpecList.some((checked) => checked.value === item)
          )
          if (sku.isThis) {
            this.checkedSpecItem = sku
            let skuIndex = this.goodsInfo.skus.findIndex(
              (sku) => sku.id === this.checkedSpecItem._id
            )
            this.checkedSpecItemIndex = skuIndex
          }
        })
      }
    },
    showCarList() {
      if (this.showCardModel) {
        this.showCardModel = false
      } else {
        this.showCardModel = true
        this.loadCartList()
      }
    },
    showSpecList(item) {
      if (!this.userInfo) {
        this.toLogin()
        return
      }
      if (!this.deliveryTab || !this.deliveryAddressSelected) {
        this.$u.toast('请先确认配送方式及配送范围')
        this.showDeliveryModel = true
        return
      }
      item.uniapp.spec_list.forEach((spec) => {
        spec.list.forEach((_spec) => {
          _spec.checked = false
        })
      })
      this.showSpecModel = true
      this.goodsInfo = item
    },
    addToCartSpec() {
      if (!this.checkedSpecItem) {
        this.$u.toast('请选择规格')
        return
      }
      let goods = this.$utils.deepClone(this.goodsInfo)
      let skuIndex = this.goodsInfo.skus.findIndex((sku) => sku.id === this.checkedSpecItem._id)
      goods.skus[0] = goods.skus[skuIndex]
      this.addToCart(goods)
      this.colseSpecModle()
    },
    colseSpecModle() {
      this.showSpecModel = false
      this.checkedSpecItem = null
      this.shecedSpecList = []
    },
    addToCar(item = undefined) {
      if (!item) {
        item = this.goodsInfo
      }
      if (item.skus.length > 1) {
        this.showSpecList(item)
      } else {
        this.addToCart(item)
      }
    },
    addToCart(item) {
      if (!this.userInfo) {
        this.toLogin()
        return
      }
      if (!this.deliveryTab || !this.deliveryAddressSelected) {
        this.$u.toast('请先确认配送方式及配送范围')
        this.showDeliveryModel = true
      }
      if (this.disable) {
        return
      }
      this.disable = true
      let skuId = item.skus[0].id || item.skus[0]._id
      let carItem = {
        count: 1,
        skuId: skuId,
        priceYuan: item.skus[0].priceYuan,
        id: item.id,
        name: item.name,
        picUrl: item.picUrl,
        sku: item.skus[0],
        vipPriceYuan: item.skus[0].vipPriceYuan
      }
      this.playAnim(item.id)
      let self = this
      self.$u.api
        .setCartAdd(carItem)
        .then((res) => {
          self.disable = false
          if (res.code === 0) {
            self.showStapleFoodModel = false
            self.showKitchenwareModel = false
            self.loadCartList()
            return
          }
          self.$u.toast(res.msg)
        })
        .catch(() => {
          self.disable = false
        })
    },
    closeCarList() {
      this.loadCartList()
    },
    playAnim(itemId) {
      const key = itemId
      this.anims.push({
        key,
        id: itemId,
        left: 0,
        top: 0,
        y: 0,
        x: 0
      })
      // 获取点击元素的节点信息
      this.$nextTick(() => {
        uni
          .createSelectorQuery()
          .select(`.add-cart-${itemId}`)
          .boundingClientRect((e) => {
            // 初始化起始位置
            const currentAnim = this.anims.find((citem) => citem.key === key)
            if (currentAnim) {
              currentAnim.top = e.top
              currentAnim.left = e.left
              // 设置目标位置
              currentAnim.y = uni.getSystemInfoSync().windowHeight - e.top - 50
              currentAnim.x = -uni.getSystemInfoSync().windowWidth * 0.78
              setTimeout(() => {
                // 等待动画执行完毕移除元素
                this.anims.splice(
                  this.anims.findIndex((v) => v.key === key),
                  1
                )
              }, 500)
            }
          })
          .exec()
      })
    },
    submit() {
      if (!this.userInfo) {
        this.toLogin()
        return
      }
      if (this.$utils.isEmpty(this.dineConfig.deliveryTypes)) {
        this.$u.toast('该商家支持的配送方式获取失败')
        return
      }
      if (!this.deliveryTab || !this.deliveryAddressSelected) {
        this.$u.toast('请先确认配送方式及配送区域')
        this.showDeliveryModel = true
        return
      }
      if (this.deliveryTab === 'pickup' && !this.dineConfig.deliveryTypes.includes(4)) {
        this.$u.toast('该商家不支持到店自取')
        return
      }
      if (this.deliveryTab === 'takeout' && !this.dineConfig.deliveryTypes.includes(3)) {
        this.$u.toast('该商家不支持外卖配送')
        return
      }
      if (this.carList.length === 0) {
        this.$u.toast('请先加购菜品')
        return
      }
      let items = []
      this.carList.forEach((item) => {
        if (!item.invalid) {
          items.push({
            cartId: item.carId || item.id
          })
        }
      })
      if (items.length === 0) {
        this.$u.toast('加购的菜品已失效')
        return
      }
      if (this.dineConfig.requireStapleFood) {
        const hasStapleFood = this.carList.some((item) => !item.invalid && item.dishAttribute === 1)
        if (!hasStapleFood) {
          uni.dialog.confirm(
            '温馨提示',
            '是否忘记了加购主食？',
            () => {
              this.showStapleFoodModel = true
              this.loadStapleFoodSpus()
            },
            () => {
              this.$utils.route(
                {
                  url: 'goods/order-confirm/order-confirm',
                  params: {
                    deliveryTab: this.deliveryTab || '',
                    items: JSON.stringify(items)
                  }
                },
                true
              )
            },
            '需要主食',
            '不要主食'
          )
          return
        }
      }
      if (this.dineConfig.requireKitchenware) {
        const hasKitchenware = this.carList.some(
          (item) => !item.invalid && item.dishAttribute === 98
        )
        if (!hasKitchenware) {
          uni.dialog.alert(
            '温馨提示',
            '需要加购餐盒才能打包带走',
            () => {
              this.showKitchenwareModel = true
              this.loadKitchenwareSpus()
            },
            '选择餐盒'
          )
          return
        }
      }
      if (this.diffThresholdPrice < 0) {
        this.$u.toast('还差' + Math.abs(this.diffThresholdPrice * 0.01).toFixed(2) + '元才能下单')
        return
      }
      this.$utils.route(
        {
          url: 'goods/order-confirm/order-confirm',
          params: {
            deliveryTab: this.deliveryTab || '',
            items: JSON.stringify(items)
          }
        },
        true
      )
    },
    // --end-- 购物车弹窗
    loadStapleFoodSpus() {
      this.$u
        .get('/app-api/product/spu/page-by-dish-attribute', { dishAttribute: 1 })
        .then((res) => {
          if (res.code === 0) {
            this.stapleFoodSpus = res.data.list
          }
        })
    },
    loadKitchenwareSpus() {
      this.$u
        .get('/app-api/product/spu/page-by-dish-attribute', { dishAttribute: 98 })
        .then((res) => {
          if (res.code === 0) {
            this.kitchenwareSpus = res.data.list
          }
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import url('@/style/btn.css');

.header {
  z-index: 1;
  position: relative;

  .delivery-tabs {
    margin: 0 20rpx;
    background-color: #61bfb4;
    color: white;
    height: 60rpx;
    line-height: 60rpx;
    border-radius: 60rpx;

    text {
      padding: 10rpx 30rpx;

      &.active {
        background-color: white;
        color: #61bfb4;
        border-radius: 60rpx;
        font-weight: bold;
      }
    }
  }
}

.mer-top {
  z-index: 2;
  margin-top: 20rpx;
  width: 100%;
  background: #ffffff;
  border-radius: 20rpx 20rpx 0 0;
  padding: 30rpx 20rpx 20rpx 20rpx;
  position: relative;

  .mer-info {
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;

    &-left {
      border-radius: 10rpx;
    }

    &-right {
      flex: 1;
      position: relative;
      margin-left: 10rpx;

      .mer-title {
        font-size: 34rpx;
      }

      .follow {
        font-size: 24rpx;
        color: #333333;
        text-align: center;
      }
    }
  }

  .store-des {
    margin-bottom: 20rpx;

    .star {
      font-size: 36rpx;
      margin-right: 30rpx;

      .goods-star {
        margin-left: 10rpx;
      }
    }

    .sale-item {
      font-size: 26rpx;
      color: #666666;
      margin-right: 30rpx;
    }
  }

  .coupon-banner {
    background-color: #fff;
    position: relative;
    margin-bottom: 20rpx;

    .coupons {
      display: flex;
      flex-wrap: wrap;
      overflow: hidden;
      flex: 1;
      height: 50rpx;
      // margin: 18rpx 0;
    }

    &-item {
      padding: 5rpx 20rpx;
      border: 2rpx solid #f54831;
      font-size: 20rpx;
      color: #fa453c;
      border-radius: 35rpx;
      margin-right: 15rpx;
      margin-bottom: 20rpx;
    }

    &-more {
      font-size: 20rpx;
      color: #999999;
    }
  }

  .store-content {
    font-size: 26rpx;
    color: #333333;
    margin-top: 25rpx;

    .houre {
      margin-bottom: 15rpx;

      // flex: 1;
      .h-h-icon {
        margin-right: 10rpx;
        margin-bottom: 2rpx;
      }
    }

    .h-icon {
      margin-left: 10rpx;
    }

    .postion {
      font-size: 26rpx;
      color: #999999;
      margin-left: 40rpx;
      margin-top: -10rpx;
    }
  }

  .tabsView {
    background-color: #fff;
  }
}

.menu-tabs {
  display: flex;
  background: white;
  margin: 20rpx 0;

  text {
    margin: 0 30rpx;
    padding: 20rpx 0;

    &.active {
      font-weight: bold;
      border-bottom: 5rpx solid #333;
    }
  }
}

::v-deep .zp-view-super {
  background-color: #fff;
  color: #333;
}

::v-deep .zp-paging-container {
  padding-bottom: 150rpx;
}

.dish-category-container {
  width: 200rpx;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #eee;
}

.dish-category-hide {
  display: none;
}

.dish-category-item {
  padding: 20rpx;
  text-align: center;
  position: relative;

  &.active {
    background-color: #d7f6f1;
    color: #10a391;
    border-left: 8rpx solid #0fa18f;
  }

  .dish-category-item-count {
    position: absolute;
    right: 10rpx;
    top: 20rpx;
    background: #fa3534;
    color: #ffffff;
    width: 35rpx;
    height: 35rpx;
    line-height: 35rpx;
    border-radius: 35rpx;
    font-size: 20rpx;
    text-align: center;
  }
}

.dish-goods-container {
  position: relative;
  display: flex;
  flex-direction: column;

  .dish-goods-category {
    z-index: 2;
    left: 200rpx;
    right: 0;
    position: fixed;
    padding: 25rpx 20rpx;
    background: white;
  }

  .dish-goods-list {
    z-index: 1;
    //margin: 80rpx 20rpx 0;
    margin: 10rpx 20rpx 0;
    padding: 10rpx 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 20rpx;
    grid-column-gap: 20rpx;

    .dish-goods-item {
      border-radius: 8rpx;
      box-shadow: 0 0 6rpx 0 #ccc;
      display: flex;
      flex-direction: column;
      position: relative;

      .dish-goods-image {
        border-radius: 8rpx;
        max-width: 250rpx;
        height: 180rpx;
      }

      .dish-goods-tag {
        position: absolute;
        top: 10rpx;
        right: 10rpx;
      }

      .dish-goods-labels {
        position: absolute;
        top: 150rpx;
        left: 10rpx;
      }
      ::v-deep .dish-goods-labels .u-tag {
        color: sandybrown !important;
      }
      ::v-deep .dish-goods-labels .u-mode-light-warning {
        border: none;
      }

      .dish-goods-details {
        padding: 20rpx;

        .dish-goods-name {
          font-size: 28rpx;
        }

        .dish-goods-price {
          font-size: 26rpx;
          color: #fa453c;
          margin-top: 10rpx;
        }

        .dish-goods-action {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          margin-top: 10rpx;

          .dish-spec-btn {
            background: #10a28f;
            color: #ffffff;
            width: 96rpx;
            border-radius: 20rpx;
            font-size: 24rpx;
            text-align: center;
            padding: 5rpx 0;
          }
        }
      }
    }
  }
}

.comment-container {
  position: relative;
}

.comment-top {
  width: 750rpx;
  height: 150rpx;
  background: #ffffff;
  margin-bottom: 20rpx;
  padding: 20rpx 0 20rpx 0;
  display: flex;
  flex-flow: column;
  justify-content: space-between;

  .count {
    align-items: center;

    .count-l {
      width: 180rpx;
      text-align: center;
    }

    .count-r {
      .type {
        background: #ffffff;
        border-radius: 6rpx;
        border: 1px solid #e6e6e6;
        padding: 4rpx 10rpx;
        font-size: 20rpx;
        color: #666666;
        margin-right: 20rpx;
      }

      .checked {
        background: #f5e7e6;
        color: #fa453c;
      }
    }

    .star {
      font-weight: 600;
      font-size: 48rpx;
      color: #333333;
    }

    .des {
      font-size: 28rpx;
      color: #666666;
    }
  }
}

.comment-box {
  padding: 20rpx;
  background-color: #fff;
  margin-bottom: 2rpx;

  .comment-info {
    overflow: auto;
    margin: 15rpx 0;

    .info-left-username {
      .name {
        font-size: 24rpx;
        color: #333333;
      }

      .date {
        font-size: 20rpx;
        color: #999999;
      }
    }
  }

  .comment-star {
    display: flex;
    align-items: center;

    .comment-star-text {
      font-size: 24rpx;
      color: #333333;
      margin-left: 10rpx;
    }
  }

  .comment-content {
    margin-top: 20rpx;
    font-size: 22rpx;
    color: #333333;
    line-height: 36rpx;
  }

  .comment-img {
    margin-top: 10rpx;

    .image {
      margin-top: 10rpx;
    }
  }
}

// --start-- 购物车弹窗

.itemView {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  padding: 20rpx 20rpx 0 20rpx;
  margin: 0 20rpx 20rpx;
  position: relative;

  .itemTag {
    position: absolute;
    left: 10rpx;
    bottom: 20rpx;
  }
}

.itemInfo {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 10rpx;
  position: relative;
  padding-bottom: 20rpx;

  .point-rule {
    font-size: 24rpx;
    color: #ff6f10;
    align-items: flex-start;
  }

  .sales {
    font-size: 24rpx;
    color: #999999;
  }

  .price {
    color: #666666;
  }

  .t {
    font-size: 24rpx;
  }

  .n {
    font-size: 28rpx;
    font-weight: 600;
    color: #fa453c;
  }

  .uicon {
    position: absolute;
    right: 0;
    bottom: 20rpx;
  }

  .uicon-1 {
    width: 96rpx;
    background: #10a28f;
    border-radius: 10rpx;
    font-size: 24rpx;
    color: #ffffff;
    text-align: center;
    padding: 2rpx 0;
  }
}

.itemText {
  font-size: 26rpx;
  font-weight: 400;
  color: #999999;
}

.priceView {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.itemPrice {
  font-size: 20rpx;
  font-weight: 400;
  color: #ff3616;
  margin-right: 10rpx;
}

.itemPrice2 {
  font-size: 28rpx;
  font-weight: bold;
  color: #ff2323;
  margin-right: 10rpx;
}

.itemOPrice {
  font-size: 24rpx;
  font-weight: 400;
  text-decoration: line-through;
  color: #c2c2c2;
}

.car-box {
  .car-tl {
    background: #f5f5f5;
    border-radius: 20rpx 20rpx 0rpx 0rpx;
    padding: 0 20rpx;

    .tl-l {
      display: flex;
      flex-direction: column;
      padding: 30rpx 20rpx;
    }

    .clear {
      font-size: 26rpx;
      color: $uni-color-primary;
    }
  }

  .car-list {
    padding: 20rpx;

    .car-item {
      margin: 10rpx 20rpx;
    }

    .car-name {
      margin-left: 20rpx;
    }

    .car-btn-hover {
      background: transparent;
    }
  }
}

.tishi-box {
  position: relative;
  display: flex;
  flex-flow: column;

  .content {
    background-color: #fff;
    border-radius: 20rpx;
    padding: 30rpx 20rpx;
  }
}

.goods-detail {
  .name {
    font-size: 28rpx;
    font-weight: bold;
    color: #666666;
    text-align: center;
  }

  .spec {
    margin-top: 30rpx;

    .tl {
      font-size: 24rpx;
    }

    .spec-list {
      margin-top: 20rpx;

      .spec-item {
        margin-bottom: 20rpx;
      }

      .text {
        height: 50rpx;
        background: #ffffff;
        border-radius: 10rpx;
        border: 1px solid #e6e6e6;
        line-height: 50rpx;
        padding: 10rpx 40rpx;
        margin-right: 20rpx;
      }

      .checked {
        background: #10a28f;
        color: #fff;
        border: 1px solid #10a28f;
      }

      .text:last-child {
        margin-right: 0;
      }
    }
  }

  .check-item {
    font-size: 24rpx;
    color: #999999;
    margin-top: 29rpx;
  }

  .const {
    font-size: 26rpx;
    margin-top: 30rpx;

    .point,
    .vip-price {
      color: #ff6f10;
      margin-left: 15rpx;
    }
  }

  .bottom {
    font-size: 26rpx;
    color: #fa453c;
    margin-top: 30rpx;
    padding: 10rpx 30rpx;

    .add-card {
      width: 180rpx;
      height: 60rpx;
      background: #10a28f;
      border-radius: 30rpx;
      font-size: 28rpx;
      color: #ffffff;
      line-height: 60rpx;
      text-align: center;
    }
  }

  .bold {
    font-weight: bold;
  }
}

.goods-point {
  align-items: center;

  .point {
    margin-top: 5rpx;
    font-size: 26rpx;
    color: #ff6f10;
  }
}

.cryptocurrency {
  margin-top: 5rpx;
  font-size: 26rpx;
  color: #ff6f10;
}

.fixed-wapper {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: #fff;
  z-index: 99999;

  .bt-box {
    height: 96rpx;
  }

  .other {
    width: 92%;
    background: #333333;
    border-radius: 40rpx;
    margin-left: 4%;
    height: 80rpx;
    margin-top: 8rpx;

    .count {
      font-weight: 600;
      font-size: 36rpx;
      color: #ffffff;
      padding-left: 50rpx;

      .count-text {
        margin-left: 40rpx;
      }

      .deliver-price {
        font-size: 24rpx;
        margin-left: 20rpx;
        font-weight: 400;
      }

      .count-icon {
        position: relative;
      }
    }

    .submit-btn {
      width: 200rpx;
      border-radius: 0rpx 40rpx 40rpx 0rpx;
    }
  }
}

.cant-check {
  position: absolute;
  background-color: rgba(102, 102, 102, 0.5);
  height: 110%;
  font-size: 46rpx;
  font-weight: 600;
  color: #fff;
  left: 0;
  right: 0;
  top: -5%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 50rpx;

  .del {
    width: 150rpx;
    height: 60rpx;
    background: $uni-color-primary;
    border-radius: 30rpx;
    font-size: 28rpx;
    color: #ffffff;
    line-height: 60rpx;
    text-align: center;
  }
}

// --end-- 购物车弹窗
</style>
